<html xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="head">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/message.min.css}">
</th:block>

<div th:fragment="profile_nav">
    <nav class="navbar justify-content-center navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img style="width: 120px;height: 45px;" th:src="@{/img/main_logo_white.png}"/>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/poetry">诗词</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/author">作者</a>
                    </li>
                </ul>

                <form action="/search" class="navbar" target="_blank">
                    <div class="input-group input-group-sm px-sm-5">
                        <input name="keyword" class="form-control" type="search" placeholder="搜索诗词/诗人">
                        <button type="submit" class="btn btn-primary btn-sm">搜索</button>
                    </div>
                </form>
            </div>
        </div>
    </nav>
</div>
<div th:fragment="index_nav">
    <nav class="navbar justify-content-center navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img style="width: 120px;height: 45px;" th:src="@{/img/main_logo_white.png}"/>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/poetry">诗词</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/author">作者</a>
                    </li>
                </ul>
                <form action="/search" class="navbar" target="_blank">
                    <div class="input-group input-group-sm px-sm-5">
                        <input name="keyword" class="form-control" type="search" placeholder="搜索诗词/诗人">
                        <button type="submit" class="btn btn-primary btn-sm">搜索</button>
                    </div>
                </form>

                <div class="mx-xl-5">
                    <!-- 登录前的状态 -->
                    <th:block th:if="${loginUser==null}">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="/login">登录</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="/login">注册</a>
                            </li>
                        </ul>
                    </th:block>
                    <!-- 登入后的状态 -->
                    <th:block th:if="${loginUser!=null}">
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle text-light" href="#" id="navbardrop" data-bs-toggle="dropdown"
                               th:text="${loginUser.nickName}">
                            </a>
                            <div class="dropdown-menu">
                                <a target="_blank" class="dropdown-item" href="/account">
                                    <i class="fa-solid fa-house"></i>
                                    账号管理
                                </a>
                                <a target="_blank" class="dropdown-item" href="/profile">
                                    <i class="fa-solid fa-address-card"></i>
                                    个人信息
                                </a>
                                <a target="_blank" class="dropdown-item" href="/collection">
                                    <i class="fa-solid fa-star"></i>

                                    收藏
                                </a>
                                <a class="dropdown-item" onclick="showLogoutModel()">
                                    <i class="fa-solid fa-arrow-right-from-bracket"></i>
                                    退出登录
                                </a>
                            </div>
                        </li>
                    </th:block>
                </div>
            </div>
        </div>
    </nav>
    <!-- 模态框 -->
    <div class="modal fade" id="logoutModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h3 class="modal-title">退出登录</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    确定要退出登录吗
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="logout()">退出登录
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<div th:fragment="search_nav">
    <nav class="navbar justify-content-center navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img style="width: 120px;height: 45px;" th:src="@{/img/main_logo_white.png}"/>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/poetry">诗词</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/author">作者</a>
                    </li>
                </ul>
                <div class="mx-xl-5">
                    <!-- 登录前的状态 -->
                    <th:block th:if="${loginUser==null}">
                        <ul class="navbar-nav me-auto">

                            <li class="nav-item">
                                <a class="nav-link" href="/login">登录</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="/login">注册</a>
                            </li>
                        </ul>
                    </th:block>
                    <!-- 登入后的状态 -->
                    <th:block th:if="${loginUser!=null}">
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle text-light" href="#" id="navbardrop" data-bs-toggle="dropdown"
                               th:text="${loginUser.nickName}">
                            </a>
                            <div class="dropdown-menu">
                                <a target="_blank" class="dropdown-item" href="/account">
                                    <i class="fa-solid fa-house"></i>
                                    账号管理
                                </a>
                                <a target="_blank" class="dropdown-item" href="/profile">
                                    <i class="fa-solid fa-address-card"></i>
                                    个人信息
                                </a>
                                <a target="_blank" class="dropdown-item" href="/collection">
                                    <i class="fa-solid fa-star"></i>

                                    收藏
                                </a>
                                <a class="dropdown-item" onclick="showLogoutModel()">
                                    <i class="fa-solid fa-arrow-right-from-bracket"></i>
                                    退出登录
                                </a>
                            </div>
                        </li>
                    </th:block>
                </div>
            </div>
        </div>
    </nav>
    <th:block th:insert="~{common/header::login-modal}"></th:block>
</div>
<div th:fragment="home_nav">
    <nav class="navbar justify-content-center navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img style="width: 120px;height: 45px;" th:src="@{/img/main_logo_white.png}"/>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/poetry">诗词</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="/index/author">作者</a>
                    </li>
                </ul>
                <form action="/search" class="navbar" target="_blank">
                    <div class="input-group input-group-sm px-sm-5">
                        <input name="keyword" class="form-control" type="search" placeholder="搜索诗词/诗人">
                        <button type="submit" class="btn btn-primary btn-sm">搜索</button>
                    </div>
                </form>

                <div class="mx-xl-5">
                    <!-- 登录前的状态 -->
                    <th:block th:if="${loginUser==null}">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" onclick="showLoginModel()">登录</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" onclick="showLoginModel()">注册</a>
                            </li>
                        </ul>
                    </th:block>
                    <!-- 登入后的状态 -->
                    <th:block th:if="${loginUser!=null}">
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle text-light" href="#" id="navbardrop" data-bs-toggle="dropdown"
                               th:text="${loginUser.nickName}">
                            </a>
                            <div class="dropdown-menu">
                                <a target="_blank" class="dropdown-item" href="/account">
                                    <i class="fa-solid fa-house"></i>
                                    账号管理
                                </a>
                                <a target="_blank" class="dropdown-item" href="/profile">
                                    <i class="fa-solid fa-address-card"></i>
                                    个人信息
                                </a>
                                <a target="_blank" class="dropdown-item" href="/collection">
                                    <i class="fa-solid fa-star"></i>

                                    收藏
                                </a>
                                <a class="dropdown-item" onclick="showLogoutModel()">
                                    <i class="fa-solid fa-arrow-right-from-bracket"></i>
                                    退出登录
                                </a>
                            </div>
                        </li>
                    </th:block>
                </div>
            </div>
        </div>
    </nav>

    <th:block th:insert="~{common/header::login-modal}"></th:block>
</div>
</div>
<div th:fragment="login-modal">
    <!-- 模态框 -->
    <div class="modal fade" id="logoutModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h3 class="modal-title">退出登录</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    确定要退出登录吗
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="logout()">退出登录
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="loginModal">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#login">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#register">注册</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="login" class="container tab-pane active">
                            <br>
                            <div class="form-floating">
                                <input type="text" class="form-control" id="floatingAccount" placeholder="手机号/邮箱">
                                <label for="floatingAccount">账号</label>
                            </div>
                            <div class="form-floating">
                                <input type="password" class="form-control" id="floatingLoginPassword" placeholder="密码">
                                <label for="floatingLoginPassword">密码</label>
                            </div>
                            <button id="loginBtn" class="w-100 btn btn-lg btn-primary" type="button"
                                    onclick="login(false);">
                                <span id="loginLoading" hidden class="spinner-border spinner-border-sm"></span>
                                登录
                            </button>
                        </div>
                        <div id="register" class="container tab-pane fade"><br>

                            <div class="form-floating">
                                <input type="text" class="form-control" id="floatingPhone" placeholder="手机号">
                                <label for="floatingPhone">手机号</label>
                            </div>
                            <div class="form-floating">
                                <input type="password" class="form-control" id="floatingRegisterPassword"
                                       placeholder="密码">
                                <label for="floatingRegisterPassword">密码</label>
                            </div>
                            <div class="form-floating">
                                <input type="password" class="form-control" id="floatingRePassword" placeholder="确认密码">
                                <label for="floatingRePassword">确认密码</label>
                            </div>
                            <button class="w-100 btn btn-lg btn-primary" onclick="registerAccount();" type="button">注册
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:fragment="user-silde">
    <ul class="nav nav-pills flex-column mb-auto " style="min-height: 40vh">
        <li>
            <a href="/account" th:class="${userSilde=='account'}?'nav-link active':'nav-link text-black'"
               aria-current="page">
                <i class="fa-solid fa-house"></i>
                账号管理
            </a>
        </li>

        <li class="nav-item">
            <a href="/profile" th:class="${userSilde=='profile'}?'nav-link active':'nav-link text-black'"
               aria-current="page">
                <i class="fa-solid fa-address-card"></i>
                个人信息
            </a>
        </li>
        <li>
            <a href="/collection" th:class="${userSilde=='collection'}?'nav-link active':'nav-link text-black'"
               aria-current="page">
                <i class="fa-solid fa-star"></i>
                收藏
            </a>
        </li>
    </ul>
    <ul class="nav nav-pills flex-column mb-auto ">
        <li class="nav-item">
            <a onclick="showLogoutModel()" class="nav-link text-dark">
                <i class="fa-solid fa-arrow-right-from-bracket"></i>
                退出
            </a>
        </li>
    </ul>
    <!-- 模态框 -->
    <div class="modal fade" id="logoutModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h3 class="modal-title">退出登录</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    确定要退出登录吗
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="logout()">退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</html>
